<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box">
        <el-form>
                        <el-col :span="9">
                          <el-input
                            placeholder="请输入文件名称"
                            style="width: 300px; margin-right: 30px"
                            v-model="queryParams.content"
                            @keyup.enter.native="getList"
                            clearable
                          >
                          </el-input>
                          <el-button type="primary" @click="getList()"> 查询 </el-button>
                          <el-button
                            type="warning"
                            plain
                            icon="el-icon-download"
                            :loading="exportLoading"
                            @click="reset()"
                          >重置</el-button>
                        </el-col>
                        <el-col :span="15">
                          <el-button
                            type="warning"
                            plain
                            icon="el-icon-download"
                            :loading="exportLoading"
                            @click="downloadEvt()"
                          >下载</el-button>
                          <el-button
                            type="warning"
                            plain
                            :loading="exportLoading"
                            @click="del()"
                          >删除</el-button>
                        </el-col>

        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="tableContainer">
              <div class="tableContainerLeft">
                <div class="fileList">
                  <ul style="height: 95%;overflow-y: auto">
                    <li v-for="(item,index) in list" :key="index" @click="iframePath(index,item.filePath,item,true)" :class="{active:($route.query.id?item.id == $route.query.id:index==checkIndex)}">
                      {{item.fileRealname}}
                    </li>
                  </ul>
                </div>
              </div>
              <div class="tableContainerRight">
                <div class="fileList">
                  <iframe v-if="urlpath.substring(urlpath.length-3)=='pdf'"  class="iframeWidth" :src="urlpath"></iframe>
                  <img v-if="urlpathThree!='pdf' && urlpathThree!='lsx' && urlpathThree!='ocx'" :src="urlpath" alt="">
                  <div style="width:100%;height: 90%;text-align: center">
                    <iframe  style="width:100%;height:100%" v-if="urlpathThree=='lsx' || urlpathThree=='ocx'" :src="previewUrl"></iframe>
                  </div>

                </div>
              </div>
        </div>
        <div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {queryFileList,deleteFile,downloadFileByFdsf} from "@/api/fileManagement";
    import loading from '../../../assets/images/loading.png'
    import Cookies from "js-cookie";
    export default {
        name: "index",
        data(){
            return{
                exportLoading:false,
                list:[],
                url:'',
                open:false,
                queryParams:{
                    content:'',
                    current: 1,
                    pageSize:1000,
                },
                // 设置上传的请求头部
                headersToken: { Authorization: "Bearer " + Cookies.get('Admin-Token')},
                checkIndex:0,
                // urlpath:'http://www.86y.org/images/loading.gif',
                urlpath:loading,
                urlpathThree:'',
                firstId:'',
                fileRealname:'',
                previewUrl:'',
            }
        },
        methods:{
            getList(){
                const Base64 = require('js-base64').Base64;
                queryFileList(this.queryParams).then((response) => {
                    console.log(response)
                    this.list=response.data;
                    this.url= response.fileServerUrl;
                    this.urlpath = this.url+response.data[this.checkIndex].filePath;
                    this.firstId = response.data[this.checkIndex].id;
                    this.urlpathThree = this.urlpath.substring(this.urlpath.length-3)
                    this.fileRealname = response.data[this.checkIndex].id;
                    console.log(this.urlpath,this.urlpathThree,'---')
                    if(this.urlpathThree=='lsx' || this.urlpathThree=='ocx'){
                        var originUrl = this.url+response.data[this.checkIndex].filePath; //要预览文件的访问地址
                        this.previewUrl = 'http://101.200.216.224:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(originUrl))
                        console.log(this.previewUrl);
                        // this.previewUrl = "data:image/gif;base64,"+ originUrl;
                    }

                });
            },
            downloadEvt(url=this.urlpath, fileName = this.fileRealname,type='') {
                    downloadFileByFdsf({id:this.firstId}).then(res=>{
                        if(this.urlpathThree=='pdf'){
                             type = "application/pdf;charset=UTF-8"
                        }else if(this.urlpathThree=='ocx'){
                            type = "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8"
                        }else if(this.urlpathThree=='png'){
                             type = "image/png;charset=UTF-8"
                        }else if(this.urlpathThree=='jpg' || this.urlpathThree=='jpeg'){
                             type = "image/image/jpeg;charset=UTF-8"
                        }else if(this.urlpathThree=='gif'){
                             type = "image/gif;charset=UTF-8"
                        }else if(this.urlpathThree=='doc'){
                             type = "application/msword;charset=UTF-8"
                        }else if(this.urlpathThree=='xls'){
                             type = "application/vnd.ms-excel;charset=UTF-8"
                        }else if(this.urlpathThree=='lsx'){
                             type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"
                        }else if(this.urlpathThree=='ppt'){
                             type = "application/vnd.ms-powerpoint;charset=UTF-8"
                        }else if(this.urlpathThree=='ptx'){
                            type = "application/vnd.openxmlformats-officedocument.presentationml.presentation;charset=UTF-8"
                        }
                         let blob =new Blob([res],{type:type})
                         let aLink = document.createElement("a")
                        aLink.download=fileName;
                        aLink.href=window.URL.createObjectURL(blob)
                        aLink.click();
                    })
            },
            iframePath(index,filePath,item){
                 this.urlpath = loading;
                const Base64 = require('js-base64').Base64;
                this.$route.query.id=null;
                this.checkIndex = index;
                this.urlpathThree = filePath.substring(filePath.length-3)
                this.firstId = item.id
                this.fileRealname = item.fileRealname
                console.log(filePath,item,'filePath')
                if(this.urlpathThree=='lsx' || this.urlpathThree=='ocx'){
                    var originUrl = this.url+filePath; //要预览文件的访问地址
                      this.previewUrl = 'http://101.200.216.224:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(originUrl))
                    console.log(this.previewUrl);
                    // this.previewUrl = "data:image/gif;base64,"+ originUrl;
                }
                this.imgLoad(this.urlpath,this.url+filePath)
            },
            upload(){
                this.open=true;
            }, // 文件上传中处理
            handleFileUploadProgress(event, file, fileList) {
                console.log(event,file,fileList)
                file.token = localStorage.getItem('Admin-Token');
                this.upload.isUploading = true;
            },
            // 文件上传成功处理
            handleFileSuccess(response, file, fileList) {
                this.open = false;
                this.isUploading = false;
                // this.$refs.upload.clearFiles();
                // this.$alert(response.msg, "文件上传", { dangerouslyUseHTMLString: true });
                this.$message.info(response.message)
                this.getList();
            },
            // 提交上传文件
            submitFileForm() {
                this.$refs.upload.submit();
            },
            del(){
                deleteFile({id:this.firstId}).then((response) => {
                     console.log(response,'---this.firstId---')
                    this.$message.info(response.message)
                    this.getList();

                });
            },
            reset(){
                this.queryParams.content = ''
                this.getList();

            },
           imgLoad(src,img){
                let bgImg = new Image();
                bgImg.src = src; // 获取背景图片的url
                bgImg.onerror = () => {
                    console.log("img onerror");      };
                bgImg.onload = () => {
                    // 等背景图片加载成功后 去除loading
                    this.urlpath =img;
                     console.log("加载完成");
                    this.loading=false;
                     return false      };    },

          },
        mounted() {
            this.getList();
        }
    }
</script>

<style lang="scss" scoped>
  .container {
    height: calc(100vh - 84px);
    background:#eee;
    background-size: cover;
  }
  .bg {
    background: #fff;
    padding: 10px 20px;
    margin-bottom: 20px;
    margin: 0 auto;
    display: flex;
    justify-content:center;
  }
  .JNPF-common-layout {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: calc(100vh - 84px);
    background: #f7f9fb;
    .JNPF-common-layout-center {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 100%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      /*padding: 20px;*/

      .JNPF-common-search-box {
        background: #fff;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-bottom: 16px;
        padding: 15px 21px;
        border-radius: 4px;
      }
      .JNPF-flex-main{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-radius: 4px;
      }
      .JNPF-common-layout-main {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        height: 100%;
        overflow: hidden;
      }
      .JNPF-flex-main .el-table {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }
  }
  .tableContainer {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    height: 100%;
    overflow: hidden;
    padding:0px 21px 2px;
    display: flex;
    .tableContainerLeft{
      flex: 1;
    }
    .tableContainerRight{
       flex: 2;
    }
  }
  .pagination-container{
    /*background: #fff;*/
    text-align: right;
    overflow: auto hidden;
    margin-top: 10px;
    padding-right: 10px;
    height:50px;
  }
  ::v-deep .el-form-item .el-input{
    width:241px;
  }
  ::v-deep .el-table__fixed{
    height:100% !important;
  }

  .titleName{
    text-align: center;
    font-size: 23px;
    line-height: 60px;
    font-weight:600;
  }
  .fileList{
    height:95%;
    width:95%;
    li{
      line-height: 30px;
      cursor: pointer;
    }
  }
  .active {
    background: #e5e5e5;
  }
  .iframeWidth{
    width:100%;
    height:90%;
  }
  img{
    width:100%;
    height:100%;
  }
</style>
